<template>
  <nav class="nav-wrpa position-fixed">
    <div class="nav-container flex auto">
      <router-link :to="{name:'index'}">
        <img src="../assets/svg/logo-menu.svg" alt="">
      </router-link>
      <div class="nav-search position-relative">
        <input @keydown.enter="goSearch" v-model="keyWord" type="text" placeholder="可检索新闻、项目、活动、报告">
        <button @click="goSearch">
          <img src="../assets/svg/btn-search.svg" alt="">
        </button>
      </div>
      <div class="user">
        <div v-if="loginStatus" class="position-relative" @click="logoutStatus = !logoutStatus">
          <img v-if="headUrl" :src="headUrl" alt="" >
          <img src="../assets/svg/default-avatar.svg" alt="" v-else>
          <span>{{name}}</span>
          <div class="log-out text-center" :class="{'open':logoutStatus}" @click="logout">退出登录</div>
        </div>
        <div v-else>
          <a @click="login"> 登录</a>
          &nbsp;|&nbsp;
          <a @click="register">注册</a>
        </div>
      </div>
    </div>
  </nav>
</template>
<script>
  import {mapState} from 'vuex'
  export default {
    name: 'navBox',
    data () {
      return {
        logoutStatus: false,
        validateError: false
      }
    },
    computed: {
      ...mapState('user', [
        'loginStatus', 'headUrl', 'name'
      ]),
      keyWord: {
        get () {
          return this.$store.state.user.searchKeyWord
        },
        set (val) {
          this.$store.commit('user/setKeyWord', val)
        }
      }
    },
    methods: {
      logout () {
        this.$store.commit('user/initUserInfo')
        localStorage.removeItem('token')
        let data = {}, name = this.$route.name, id = parseInt(this.$route.params.id)
        if (name === 'alerts') {  // 蜂鸟快讯
          data.index = 0
        } else if (name === 'hot') {  // 热门话题
          data.index = 1
        } else if (name === 'subscribe') {  // 我的话题
          data.index = 2
        } else {  // 话题定制
          data.index = 3
        }
        data.id = id
        this.$store.dispatch('news/getMenue', data)
      },
      goSearch () {
        if (this.keyWord !== '') {
          this.$router.push({name: 'search'})
        }
      },
      login () {
        this.$logPop(true).then((response) => {
          if (response.code === '200') {
            let data = {}, name = this.$route.name, id = parseInt(this.$route.params.id)
            if (name === 'alerts') {  // 蜂鸟快讯
              data.index = 0
            } else if (name === 'hot') {  // 热门话题
              data.index = 1
            } else if (name === 'subscribe') {  // 我的话题
              data.index = 2
            } else {  // 话题定制
              data.index = 3
            }
            data.id = id
            this.$store.dispatch('news/getMenue', data)
            if (!response.data.inited) {  // 如果是第一次登录
              this.$store.dispatch('user/modifyLogin').then((response) => {
                if (response.code === '200') {
                  this.$router.push({name: 'subscrible'})
                }
              })
            }
          }
        })
      },
      register () {
        this.$logPop(false)
      }
    }
  }
</script>
